<template>
  <div class="signup-form">
    <h2>各大行业职位任你选</h2>
    <p>包含各行各业的海量BOSS直聘号</p>
    <div class="input-group">
      <span class="country-code">+86</span>
      <input type="text" v-model="phoneNumber" placeholder="手机号" />
    </div>
    <div class="input-group">
      <input type="text" v-model="verificationCode" placeholder="验证码" />
      <button class="send-code-button" @click="sendVerificationCode">
        发送验证码
      </button>
    </div>
    <button class="signup-button" @click="signUp">登录/注册</button>
    <p class="terms">已阅读并同意《用户协议》和《隐私政策》</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const phoneNumber = ref('')
const verificationCode = ref('')

const sendVerificationCode = () => {
  console.log('Sending verification code to:', phoneNumber.value)
}

const signUp = () => {
  console.log('Signing up with:', phoneNumber.value, verificationCode.value)
}
</script>

<style scoped>
.signup-form {
  width: 300px;
  background-color: #40a0ff88;
  color: white;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.signup-form h2 {
  margin: 0 0 10px;
  font-size: 18px;
}

.signup-form > p {
  margin: 0 0 20px;
  font-size: 14px;
}

.input-group {
  display: flex;
  margin-bottom: 10px;
}

.country-code {
  background-color: #f0f0f0;
  color: #333;
  padding: 10px;
  border-radius: 4px 0 0 4px;
  font-size: 14px;
}

.input-group input {
  flex-grow: 1;
  padding: 10px;
  border: none;
  font-size: 14px;
}

.send-code-button {
  padding: 0 10px;
  background-color: white;
  color: #409eff;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
}

.signup-button {
  width: 100%;
  padding: 10px;
  background-color: white;
  color: #409eff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
  font-size: 16px;
}

.terms {
  font-size: 12px;
  margin-top: 10px;
  text-align: center;
}
</style>
